<template>
  <div class="home">
    <CategoryWithBanner />
    <!-- 推荐商品 -->
    <RecommendGoods :goodsList="goodsList" />
    <!-- 优惠券专区 -->
    <PromotionArea v-if="couponList.length > 0" :promotionList="couponList" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CategoryWithBanner from '../components/home/CategoryWithBanner.vue'
import PromotionArea from '../components/home/PromotionArea.vue'
import RecommendGoods from '../components/home/RecommendGoods.vue'
import { getRecommendGoodsList } from '@/api/goods'
import { getAllCouponList } from '@/api/coupon'
const goodsList = ref([])
const couponList = ref([])

//获取推荐商品列表
const getRecommendList = async () => {
  try {
    const res = await getRecommendGoodsList()
    goodsList.value = res || []
  } catch (error) {
    console.error('获取推荐商品失败:', error)
  }
}

//获取活动优惠券
const getCouponList = async () => {
  try {
    const res = await getAllCouponList()
    if (res && Array.isArray(res)) {
      // 直接使用后端返回的数据，不做额外处理
      couponList.value = res
    } else {
      couponList.value = []
    }
    console.log('优惠券数据:', couponList.value)
  } catch (error) {
    console.error('获取优惠券失败:', error)
    couponList.value = []
  }
}

onMounted(() => {//挂载时调用
  getRecommendList()
  getCouponList()
})
</script>

<style scoped>
.home {
  min-height: 100vh;
  background-color: var(--bg-color-page);
  padding: 20px 0;
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
  .home {
    padding: 15px;
  }
}

@media screen and (max-width: 768px) {
  .home {
    padding: 10px;
  }
}

/* 添加页面过渡动画 */
.home {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 滚动条美化 */
.home::-webkit-scrollbar {
  width: 8px;
}

.home::-webkit-scrollbar-track {
  background: var(--bg-color-page);
}

.home::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.home::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* 优化性能 */
.home {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>